<template>
    <div>
        <el-card class="box-card" shadow="hover">
            <div class="analysis-title">{{questionIndex}}. {{questionTitle}}</div>

            <el-divider></el-divider>

            <div v-if="questionType==='date'||questionType==='single_line_text'||questionType==='multi_line_text'">
                <el-table
                        :data="writeValueList"
                        height="250"
                        border
                        style="width: 80%; margin: auto">
                    <el-table-column
                            prop="writeValue"
                            label="填写内容">
                    </el-table-column>
                </el-table>
            </div>

            <div v-if="questionType==='single_check'||questionType==='multi_check'">

                <el-radio-group v-model="showBar" class="choose-show">
                    <el-radio :label="true">数量</el-radio>
                    <el-radio :label="false">占比</el-radio>
                </el-radio-group>

                <el-row>
                    <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
                        <div v-show="showBar===true" :id="'barChart'+questionIndex" class="bar-chart"
                             :style="{height:barHeight}"></div>

                        <div v-show="showBar===false" :id="'pieChart'+questionIndex" class="pie-chart"></div>
                    </el-col>

                    <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                        <el-table
                                :data="questionValueList"
                                :default-sort="{prop:'value',order:'descending'}"
                                class="analysis-table">
                            <el-table-column
                                    prop="name"
                                    label="选项">
                            </el-table-column>
                            <el-table-column
                                    prop="value"
                                    label="人数">
                            </el-table-column>
                        </el-table>
                    </el-col>

                </el-row>

            </div>

            <div v-if="questionType==='number'||questionType==='grade'">

                <el-row>
                    <el-col :xs="24" :sm="18" :md="18" :lg="18" :xl="18">
                        <div v-show="showBar===true" :id="'barChart'+questionIndex" class="bar-chart"
                             :style="{height:barHeight}"></div>

                        <div v-show="showBar===false" :id="'pieChart'+questionIndex" class="pie-chart"></div>
                    </el-col>

                    <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
                        <el-table
                                :data="questionValueList"
                                :default-sort="{prop:'value',order:'descending'}"
                                class="analysis-table">
                            <el-table-column
                                    prop="name"
                                    label="内容">
                            </el-table-column>
                            <el-table-column
                                    prop="value"
                                    label="数值">
                            </el-table-column>
                        </el-table>
                    </el-col>

                </el-row>

            </div>

        </el-card>
    </div>
</template>
</script>
<script setup name="AnalysisCard">
import echarts from "echarts/lib/echarts"
import "echarts/lib/chart/bar"
import "echarts/lib/chart/pie"
import "echarts/lib/component/tooltip"
import { ElMessage } from 'element-plus';
import axios from 'axios';

const showBar = ref(true)
const writeValueList = ref(null)
const questionValueList = ref([])
const barHeight = ref('250px')
const props = defineProps({
    questionIndex: Number,
    questionId: Number,
    questionTitle: String,
    questionType: String
})

function fetchData() {
    if (props.questionType === 'single_check' || props.questionType === 'multi_check' || props.questionType === 'number' || props.questionType === 'grade') {
        axios.get("/adviser/getQuestionValueList", {
            params: {
                questionId: props.questionId
            }
        }).then((res) => {
            const temp = res['data'];

            const dataList = [];
            for (const oneName in temp) {
                dataList.push({'name': oneName, 'value': temp[oneName]})
            }
            dataList.sort((a, b) => {
                return a.value - b.value
            });
            questionValueList.value = dataList;
            barHeight.value = questionValueList.value.length*33+150+'px'
            drawBar();
            drawPie();

        }).catch(() => {
            ElMessage({message: "error！读取失败！", duration: 1000, type:'error'})
        })
    } else {
        axios.get("/adviser/getWriteValue", {
            params: {
                questionId: props.questionId
            }
        }).then((res) => {
            writeValueList.value = res['data']
        }).catch(() => {
            ElMessage({message: "error！读取失败！", duration: 1000, type: 'error'})
        })
    }

}
function drawBar() {
    const myBarChart = echarts.init(document.getElementById('barChart' + props.questionIndex), 'light');
    myBarChart.setOption({
        tooltip: {},
        grid: {left: '15%'},
        xAxis: {},
        yAxis: {
            data: questionValueList.value.map(x => x['name'])
        },
        series: [{
            name: '选择人数',
            type: 'bar',
            data: questionValueList.value
        }]
    });
}
function drawPie() {
    const myPieChart = echarts.init(document.getElementById('pieChart' + props.questionIndex), 'light');
    myPieChart.setOption({
        tooltip: {},
        grid: {left: 20},
        series: [{
            name: '选择人数',
            type: 'pie',
            data: questionValueList.value
        }]
    });

}

fetchData();
</script>

<style scoped>
    .bar-chart {
        width: 100%;
    }

    .pie-chart {
        margin-left: calc(25% - 100px);
        width: 400px;
        height: 300px;
    }

    .box-card {
        transition: all ease 300ms;
        text-align: left;
    }

    .analysis-table {
    }

    .choose-show {
        margin-left: 80px;
    }

    .analysis-title {
        margin: 15px;
        font-size: 14px;
    }
</style>